<template>
	<view>
		<view class="margin-sm u-border padding" v-for="(item,index) in addressList" :key="index"  :class="{'default':item.isdefault}">
			<view class="default-cont">
				默认
			</view>
			<view class="flex justify-between">
				<view class="flex align-center">
					<text class="iconfont icon-gouxuan margin-right"
						:class="checkedIdx==index||item.isdefault?'color-yellow':''"
						@click="handleCheckAddres(index)"
					></text>
					<view class="cu-item arrow">
						{{item.username}},{{item.phone}}
						<view class="">
							{{item.city}}
							{{item.region}}
							{{item.detail}}
						</view>
					</view>
				</view>
				<view @click="handleEdit(index)" class="edit margin-bottom-xs align-center">
					<text class="iconfont icon-bianji"></text>
				</view>
			</view>
			<view class="flex justify-around align-center margin">
				<view class="" v-if="item.isdefault">
					默认地址
				</view>
				<view class="" v-else @click="handleDefault(index)">
					设置为默认
				</view>
				<u-line length="20" direction="col"></u-line>
				<view class="">
					删除地址
				</view>
			</view>
		</view>
		<view class="text-center">
			<button type="default" class="cu-btn bg-brown" @click="handleAdd">
				新增地址
			</button>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		
		computed: {
			//mapState获取数据
			...mapState({
				addressList:state=>state.address.addressList,
				checkedIdx:state=>state.address.checkedIdx,
				// 拿用户id
				userInfo:state=>state.user.userInfo
			})
		},
		methods:{
			...mapMutations({
				// 'handleDefault':'address/addressDefaultMut',
				'handleCheckAddres':'address/addressCheckMut'
			}),
			handleAdd(){
				uni.navigateTo({
					url:'adddress-detail'
				})
			},
			//设置为默认
			handleDefault(idx){
				// {
				// 	"requests": [
				          // {
				          //   "method": "PUT",
				          //   "path": "/1.1/classes/address/${objectId}",
				          //   "body": {
				          //     "isdefault": true
				          //   }
				//           }
				// 		]
				// 	}
				let obj = {"requests":[]}
				this.addressList.forEach((item,i)=>{
					let bool = i===idx
					obj.requests.push({
						  "method": "PUT",
						  "path": `/1.1/classes/address/${item.objectId}`,
						  "body": {
						    "isdefault": bool
							}
						})
				})
				//批量操作在线数据
				//先提交
				this.$post('/1.1/batch',obj).then(res=>{
					//再触发改变isdefault的属性
					this.$store.commit('address/addressDefaultMut',idx)
				})
			}
		}
	}
</script>

<style lang="scss">

	.edit{
		width: 80upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;
		background-color: #e6e6e6;
		border-radius: 50%;
	}
	.default-cont{
		display: none;
	}
.default{
	position: relative;
	overflow: hidden;
	.default-cont{
		padding: 40upx 10upx 10upx;
		width: 100upx;
		background-color: #fae456;
		font-size: 12upx;
		text-align: center;
		position: absolute;
		top: -30upx;
		right: -40upx;
		transform: rotate(45deg);
		display: block;
	}
}

</style>
